<template>
	<view class="food-card">
		<view class="back" <!-- #ifndef WEB -->
			:style="{margin:`${getstatusBarHeight()}px 0 0 24rpx`}"
			<!-- #endif -->

			<!-- #ifdef WEB -->
			:style="{margin:`24rpx 0 0 24rpx`}"
			<!-- #endif -->
			>
			<uni-icons type="left" size="24" color="#fff" @click="handleBack"></uni-icons>
		</view>
		<view class="image">
			<img-preview :setOptions="setOptions"></img-preview>
		</view>
		<view class="info">
			<view class="price">
				￥
				<text>{{ data.price }}</text>
			</view>
			<view class="title">{{ data.name }}</view>
			<view class="other">
				<view class="left">
					<text class="sell">月售 {{ data.sell }}</text>
					<!-- <text class="praise">好评率 66%</text> -->
				</view>
				<view class="add-to-cart">
					<button @click="handleAppear" @touchmove.prevent>+加入购物车</button>
				</view>
			</view>
		</view>

		<view class="comments">
			<view class="header">
				<text class="title">商品评价</text>
				<view class="all-comments" @click="handleAllComment">全部评价 ></view>
			</view>
			<view class="for-comment" v-for="item of comtList" :key="item">
				<comment :item="item" />
			</view>
			<view class="all-comments" @click="handleAllComment">查看全部评价 ></view>
		</view>

		<view :class="{ mark: true, 'mark-active': isOpen }" @click="handleRemove" v-show="delayOpen"
			@touchmove.stop.prevent></view>
		<view :class="{ select: true, 'select-active': isOpen }" @touchmove.stop.prevent>
			<view class="mark-header">
				<view class="image-and-name">
					<image class="image" src="/static/images/food2.jpg" mode="aspectFill"></image>
					<view class="name">好吃的饭</view>
				</view>
				<view class="close" @click="handleRemove">×</view>
			</view>
			<scroll-view class="scrollable-area" scroll-y
				:style="{ height: `calc(100% - 260rpx - 90rpx - ${bottomSafeArea()}px)` }">
				<food-select-tab v-for="(item, index) in tabList" :key="item.title" :item="item" :index="index"
					@returnData="handleChangeTab" ref="foodSelectTabRef" />
				<view class="num-select">
					<view class="text">数量</view>
					<view class="button">
						<view :class="{ decrease: true, 'disable-color': disable }" @click="handleChangeNum('decrease')">-</view>
						<view class="num">×{{ num }}</view>
						<view class="add" @click="handleChangeNum('add')">+</view>
					</view>
				</view>
			</scroll-view>
			<view class="selected">
				<view class="selected-button" @click="handleSelected">选好了</view>
			</view>
		</view>

		<add-to-cart></add-to-cart>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue';
import { bottomSafeArea, getstatusBarHeight } from '../../utils/system';
import { onLoad } from '@dcloudio/uni-app';
import { useShoppingCart } from '../../stores/shoppingCart';

const store = useShoppingCart();

// 查看和该图片一样的大图（传递相同的url）
const url = ref('/static/images/food2.jpg');

// 本页的数据
const data = ref(null);

// 配置最上面的图片大小、地址
const setOptions = computed(() => ({ setHeight: '700rpx', setWidth: '100%', setSrc: data.value?.img }));

const isOpen = ref(false);
const delayOpen = ref(false);

const foodSelectTabRef = ref(null);

// 通过id获取
const tabList = ref([
	{
		title: '辣度',
		children: [
			{ text: '不辣', value: 0 },
			{ text: '微辣', value: 1 },
			{ text: '中辣', value: 2 },
			{ text: '重辣', value: 4 }
		]
	},
	{
		title: '小菜',
		children: [
			{ text: '酸菜', value: 0 },
			{ text: '腌萝卜', value: 1 }
		]
	}
]);

// 点击进入详情页后，通过获取url后面的id值来获取数据
onLoad((options) => {
	const { id = null } = options;

	// 更新本页数据
	data.value = {
		id: 'USA',
		nextId: 'one',
		name: '猪脚饭',
		checked: true,
		img: '../../static/images/food2.jpg',
		price: '12.5',
		num: computed(() => num.value),
		desc: '',
		sell: 666
	};


});

const selectedTab = ref(tabList.value.map((e) => e.children[0]));

// 定时器
let timer = null

// 打开上滑抽屉，进入选择规格
const handleAppear = () => {
	delayOpen.value = true;
	timer = setTimeout(() => {
		isOpen.value = true;
		timer = null;
	});
};

// 关闭抽屉
const handleRemove = () => {
	if (timer) return
	isOpen.value = false;
	timer = setTimeout(() => {
		delayOpen.value = false;
		timer = null;
	}, 400);
};

// 选好了
const handleSelected = () => {
	// 选好后，重置tab
	foodSelectTabRef.value.forEach((e) => {
		e.changed = 0;
	});

	// 选好后，关闭抽屉
	handleRemove();

	uni.showToast({
		title: '已加入购物车',
		icon: 'none',
		image: '/static/icons/shop.png'
	});

	// 将抽屉中选中tab的值填入本页数据中=>data.value.desc
	data.value.desc = selectedTab.value.map((e) => e.text).join('/');

	data.value.amount = data.value.price * data.value.num;

	// 通过Object.assign()来浅拷贝对象，防止出现传递热响应的对象，导致所有数据都为最后一次改变后的数据
	const rs = Object.assign({}, data.value);

	// 将上一级数据通过pinia传到后端
	store.shop(rs);

	num.value = 1;
	disable.value = true;

	// 重置tab
	handleChangeTab();
};

// 改变抽屉中的tab后触发
const handleChangeTab = (e) => {
	if (e) selectedTab.value[e.index] = e.data;
	else selectedTab.value = tabList.value.map((e) => e.children[0]);
};

// 返回
const handleBack = () => {
	uni.navigateBack();
};

// 查看所有评论
const handleAllComment = () => {
	uni.navigateTo({
		url: '/pages/allComment/allComment'
	});
};

// 获取评价数据
const comtList = ref([
	{
		comment: '这个好好吃+1',
		icon: '/static/images/food1.jpg',
		img: '/static/logo.png',
		name: 'jntm0',
		time: '2025-4-0'
	},
	{
		comment: '这个好好吃+2',
		icon: '/static/images/food1.jpg',
		img: '/static/logo.png',
		name: 'jntm1',
		time: '2025-4-1'
	}
]);

// 商品数量
const num = ref(1);

// 商品数量为1时，不可减少，显示为更浅的颜色，通过该变量来控制
const disable = ref(true);

// 添加减少商品数量
const handleChangeNum = (str) => {
	if (str === 'add') num.value++;
	else if (str === 'decrease') {
		if (num.value == 1) {
			disable.value = true;
			uni.showToast({
				title: '不能再减少啦!',
				icon: 'none'
			});
			return;
		}
		num.value--;
	}
	if (disable.value) disable.value = false;
};
</script>
<style scoped lang="scss">
.food-card {
	z-index: 5;
	background-color: #fff;
	// position: relative;
	min-height: 100vh;

	.back {
		position: fixed;
		z-index: 20;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 100px;
		width: 30px;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.image {
		width: 100%;
		height: 700rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.info {
		margin: 20rpx;
		background-color: #f6f6f6;
		border-radius: 20rpx;
		padding: 30rpx;
		border: #f1f1f1 1px solid;

		.price {
			text {
				font-size: 44rpx;
				font-weight: 600;
			}
		}

		.title {
			font-size: 42rpx;
			font-weight: 600;
			margin: 20rpx 0;
		}

		.other {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			margin-top: 10rpx;

			.left {
				color: #999;
				font-size: 28rpx;
				gap: 20rpx;
				display: flex;
			}

			.add-to-cart {
				button {
					font-size: 30rpx;
					border-radius: 100px;
					height: 55rpx;
					line-height: 55rpx;
					background-color: #ff5000;
					color: white;
					text-align: center;
				}
			}
		}
	}

	.comments {
		margin: 20rpx;
		background-color: #f6f6f6;
		border-radius: 20rpx;
		padding: 30rpx;
		border: #f1f1f1 1px solid;

		.all-comments {
			font-size: 28rpx;
			color: #999;
			text-align: center;
		}

		.header {
			display: flex;
			justify-content: space-between;

			.title {
				font-size: 36rpx;
				font-weight: 600;
			}
		}

		.for-comment .comment-box:last-child {
			border: none;
		}
	}

	.mark {
		position: absolute;
		top: 0;
		left: 0;
		height: 200%;
		width: 100vw;
		transition: all 0.4s;
		// background-color: (0,0,0,0);
	}

	.select {
		width: 100%;
		height: 1200rpx;
		background-color: #f1f1f1;
		position: fixed;
		bottom: -1200rpx;
		transition: all 0.3s;
		border-radius: 30rpx 30rpx 0 0;
		box-sizing: border-box;
		padding: 20rpx;
		z-index: 10;

		.mark-header {
			width: 100%;
			height: 260rpx;
			display: flex;
			justify-content: space-between;

			.image-and-name {
				display: flex;
				flex-direction: row;
				gap: 20rpx;

				.image {
					width: 260rpx;
					height: 260rpx;
					border-radius: 30rpx;
				}

				.name {
					margin-top: 20rpx;
					font-size: 36rpx;
					font-weight: 600;
				}
			}

			.close {
				font-size: 80rpx;
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
			}
		}

		.selected {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.selected-button {
				border-radius: 100rpx;
				height: 80rpx;
				background-color: red;
				width: 80%;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
			}
		}

		.scrollable-area {
			.num-select {
				display: flex;
				justify-content: space-between;
				flex-direction: row;

				.text {
					font-weight: 600;
				}

				.button {
					margin-right: 30rpx;
					font-weight: 600;
					display: flex;
					flex-direction: row;
					gap: 20rpx;
					align-items: center;
					color: #444;

					.add,
					.decrease {
						font-size: 40rpx;
					}

					.num {
						background-color: #e1e1e1;
						padding: 3rpx 5rpx;
						border-radius: 10rpx;
					}
				}
			}
		}
	}
}
</style>
<style>
.mark-active {
	background-color: rgba(0, 0, 0, 0.3);
	transition: all 0.4s;
}

.select-active {
	transform: translateY(-1200rpx);
}

.scrollable-area {
	margin-top: 20rpx;
}

.disable-color {
	color: #aaa;
}
</style>
